@import '@/assets/styles/iconfont.scss';

.forum {
  &__container {
  }

  &__publish {
    display: flex;
    position: relative;
    align-items: center;
    position: fixed;
    bottom: 20vw;
    right: 0;
    width: 12vw;
    height: 12vw;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px #999;
    z-index: 2;

    .icon {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 2;
      align-items: center;
      justify-content: center;
    }

    &--background {
      position: absolute;
      left: 0;
      top: 0;
      width: 12vw;
      height: 12vw;
      border-radius: 50%;
      background: #fff;
      z-index: 1;
    }
  }

  &__wrap {
    padding: 2vw 0;
    border-bottom: #d7d7d7 2px solid;
    font-size: 0.6em;

    .header {
      display: flex;
      align-items: center;
      padding: 3vw;

      .avatar {
        width: 12vw;
        height: 12vw;
        margin-right: 3vw;
        border-radius: 50%;
      }

      .author {
        color: #333;
        font-size: 1.2em;
        font-weight: bold;

        .time {
          margin-top: 0.2em;
          color: #666;
          font-size: 0.8em;
          font-weight: normal;
        }
      }

      .more {
        margin-left: auto;
        color: #999;
        font-size: 1.2em;
      }
    }

    .image {
      width: 100vw;
      height: 40vw;
    }

    .content__wrap {
      padding: 0 3vw;

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0.4em 0;
        color: #666;
        font-size: 1.2em;
        font-weight: bold;
      }

      .content {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #666;
        font-size: 1em;
      }
    }

    .status {
      display: flex;
      align-items: center;
      padding: 3vw;
      color: #666;

      .icon-like {
        margin-right: 0.2em;
        color: #fa4b2a;
        font-size: 2em;
      }

      .icon-comment {
        margin: 0 0.2em;
        color: #66a6ff;
        font-size: 2em;
      }
    }
  }
}
